<template>
	<view class="score-box">
		<view class="score">
			<view class="num">{{ score }}{{ (score * 10) % 10 == 0 ? '.0' : '' }}</view> 
			<xl-stars v-model="score" size="14" margin="2"></xl-stars>
		</view>
		<view class="stars-box">
			<view class="row">
				<xl-stars class="stars" :modelValue="0" :margin="1" color="#aaa" :size="12" :readonly="true" :max="5" align="right"/>
				<view class="progress">
					<view class="value" :style="[{ width:five}]"></view>
				</view>
			</view>
			<view class="row">
				<xl-stars class="stars" :modelValue="0" :margin="1" color="#aaa" :size="12" :readonly="true" :max="4" align="right"/>
				<view class="progress">
					<view class="value" :style="[{ width:four}]"></view>
				</view>
			</view>
			<view class="row">
				<xl-stars class="stars" :modelValue="0" :margin="1" color="#aaa" :size="12" :readonly="true" :max="3" align="right"/>
				<view class="progress">
					<view class="value" :style="[{ width:three}]"></view>
				</view>
			</view>
			<view class="row">
				<xl-stars class="stars" :modelValue="0" :margin="1" color="#aaa" :size="11" :readonly="true" :max="2" align="right"/>
				<view class="progress">
					<view class="value" :style="[{ width:two}]"></view>
				</view>
			</view>
			<view class="row">
				<xl-stars class="stars" :modelValue="0" :margin="1" color="#aaa" :size="11" :readonly="true" :max="1" align="right"/>
				<view class="progress">
					<view class="value" :style="[{ width:one}]"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	
	const props = defineProps({
		scores: {
			type: Array,
			default: function(){
				return new Array(5,0,0,0,0);
			}
		}
	})
	const score = computed(() => {
		if((props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4]) === 0){
			return 5;
		} else {
			let s = (5*props.scores[0]+4*props.scores[1]+3*props.scores[2]+2*props.scores[3]+1*props.scores[4])/(props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4]);
			return Math.floor(s * 10) / 10
		}
	})
	const one = computed(() => {
		return props.scores[4]*100/(props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4])+"%"
	})
	const two = computed(() => {
		return props.scores[3]*100/(props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4])+"%"
	})
	const three = computed(() => {
		return props.scores[2]*100/(props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4])+"%"
	})
	const four = computed(() => {
		return props.scores[1]*100/(props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4])+"%"
	})
	const five = computed(() => {
		return props.scores[0]*100/(props.scores[0]+props.scores[1]+props.scores[2]+props.scores[3]+props.scores[4])+"%";;
	})
	
</script>

<style lang="scss" scoped>
	.score-box{
		display: flex;
		flex-direction: row;
		padding: 10rpx 30rpx;
		.score{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: 	#ffca3e;
			margin-right: 30rpx;
			.num{
				font-size: 110rpx;
				height: 120rpx;
				line-height: 120rpx;
			}
		}
		.stars-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 4rpx;
			.row{
				display: flex;
				flex-direction: row;
				height: 25rpx;
				margin-top: 4rpx;
				.stars{
					width: 136rpx;
					margin-top: 4rpx;
					justify-content: flex-end;
				}
				.progress {
					overflow: hidden;
					flex: 1;
					height: 6px;
					border-radius: 100px;
					background-color: #ebeef5;
					display: inline-flex;
					align-items: center;
					margin-left: 8px;
					margin-top: 5px;
					.value {
					    width: 0;
					    height: 100%;
					    align-items: center;
					    display: flex;
						flex-direction: row;
					    justify-items: flex-end;
					    justify-content: space-around;
					    font-size: 10px;
					    color: #ffffff;
					    transition: width 0.6s ease;
						background-color: #888;
					}
				}
			}
		}
	}
</style>
